





<!-- 状态选择器
    标签:link{}         未访问过的链接
    标签:visited{}      已访问过的链接
    标签:hover{}        鼠标悬停
    标签:active{}       鼠标按下但不松开
    标签:disabled{}     禁用
    标签:checked{}      匹配被选中的元素
    标签:focus          选中元素成为焦点
-->

<!-- 优先级
    先写hover
    再写active
-->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态选择器</title>
    <style>
        a:link {
            color: red;
        }
        
        a:visited {
            color: green;
        }
        
        a:hover {
            color: purple;
        }
        
        a:active {
            color: purple;
        }
        
        button {
            color: red;
            background-color: green;
        }
        
        button:hover {
            color: rebeccapurple;
            background-color: yellowgreen;
        }
        
        button:active {
            color: orange;
        }
        
        button:disabled {
            color: white;
            background-color: grey;
        }
        
        input[type="checkbox"]:checked+label {
            color: blue;
        }
        
        input[type="text"]:focus {
            border: 2px solid orange;
            outline: none;
        }
    </style>
</head>

<body>
    <a href="#A">超链接1</a>
    <a href="#B">超链接2</a>
    <a href="#C">超链接3</a>
    <a href="#D">超链接4</a>
    <br>
    <hr>
    <br>
    <button>点击1</button>
    <br>
    <hr>
    <br>
    <button disabled>点击2</button>
    <br>
    <hr>
    <br>
    <input type="checkbox" id="option1">
    <label for="option1">这是一个复选框选中时，文字会变蓝</label>
    <br>
    <hr>
    <br>
    <input type="text" placeholder="点击输入框，边框会变黄">

</body>

</html>